<template>
  <div ref="scrollContainer">
    <div class="relative isolate px-6 pt-14 lg:px-8">
      <div class="absolute ss inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
        aria-hidden="true">
        <div
          class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
          style="
          clip-path: polygon(
            74.1% 44.1%,
            100% 61.6%,
            97.5% 26.9%,
            85.5% 0.1%,
            80.7% 2%,
            72.5% 32.5%,
            60.2% 62.4%,
            52.4% 68.1%,
            47.5% 58.3%,
            45.2% 34.5%,
            27.5% 76.7%,
            0.1% 64.9%,
            17.9% 100%,
            27.6% 76.8%,
            76.1% 97.7%,
            74.1% 44.1%
          );
        "></div>
      </div>
      <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
          <div
            class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
            Announcing our next round of funding.
            <a href="#" class="font-semibold text-indigo-600"><span class="absolute inset-0"
                aria-hidden="true"></span>Read
              more
              <span aria-hidden="true">&rarr;</span></a>
          </div>
        </div>
        <div class="text-center">
          <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
            Data to enrich your online business
          </h1>
          <p class="mt-6 text-lg leading-8 text-gray-600">
            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem
            cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat
            aliqua.
          </p>
          <div class="mt-10 flex items-center justify-center gap-x-6">
            <a href="#"
              class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get
              started</a>
            <a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more <span
                aria-hidden="true">→</span></a>
          </div>
        </div>
      </div>
      <div
        class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
        aria-hidden="true">
        <div
          class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
          style="
          clip-path: polygon(
            74.1% 44.1%,
            100% 61.6%,
            97.5% 26.9%,
            85.5% 0.1%,
            80.7% 2%,
            72.5% 32.5%,
            60.2% 62.4%,
            52.4% 68.1%,
            47.5% 58.3%,
            45.2% 34.5%,
            27.5% 76.7%,
            0.1% 64.9%,
            17.9% 100%,
            27.6% 76.8%,
            76.1% 97.7%,
            74.1% 44.1%
          );
        "></div>
      </div>
    </div>

    <div class="sm:px-8 mt-24 md:mt-28">
      <div class="mx-auto w-full max-w-7xl lg:px-8">
        <div class="relative px-4 sm:px-8 lg:px-12">
          <div class="mx-auto max-w-2xl lg:max-w-5xl">
            <div class="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
              <div class="flex flex-col gap-16">
                <article class="group relative flex flex-col items-start">
                  <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
                    <div
                      class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl dark:bg-zinc-800/50">
                    </div>
                    <a href="/articles/crafting-a-design-system-for-a-multiplanetary-future"><span
                        class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span><span
                        class="relative z-10">Crafting a design system for a multiplanetary
                        future</span></a>
                  </h2>
                  <time
                    class="relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5"
                    datetime="2022-09-05"><span class="absolute inset-y-0 left-0 flex items-center"
                      aria-hidden="true"><span
                        class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span></span>September 5, 2022</time>
                  <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                    Most companies try to stay ahead of the curve when it comes to
                    visual design, but for Planetaria we needed to create a brand
                    that would still inspire us 100 years from now when humanity
                    has spread across our entire solar system.
                  </p>
                  <div aria-hidden="true" class="relative z-10 mt-4 flex items-center text-sm font-medium text-teal-500">
                    Read article<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"
                      class="ml-1 h-4 w-4 stroke-current">
                      <path d="M6.75 5.75 9.25 8l-2.5 2.25" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </article>
                <article class="group relative flex flex-col items-start">
                  <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
                    <div
                      class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl dark:bg-zinc-800/50">
                    </div>
                    <a href="/articles/introducing-animaginary"><span
                        class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span><span
                        class="relative z-10">Introducing Animaginary: High performance web
                        animations</span></a>
                  </h2>
                  <time
                    class="relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5"
                    datetime="2022-09-02"><span class="absolute inset-y-0 left-0 flex items-center"
                      aria-hidden="true"><span
                        class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span></span>September 2, 2022</time>
                  <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                    When you’re building a website for a company as ambitious as
                    Planetaria, you need to make an impression. I wanted people to
                    visit our website and see animations that looked more
                    realistic than reality itself.
                  </p>
                  <div aria-hidden="true" class="relative z-10 mt-4 flex items-center text-sm font-medium text-teal-500">
                    Read article<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"
                      class="ml-1 h-4 w-4 stroke-current">
                      <path d="M6.75 5.75 9.25 8l-2.5 2.25" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </article>
                <article class="group relative flex flex-col items-start">
                  <h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
                    <div
                      class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl dark:bg-zinc-800/50">
                    </div>
                    <a href="/articles/rewriting-the-cosmos-kernel-in-rust"><span
                        class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl"></span><span
                        class="relative z-10">Rewriting the cosmOS kernel in Rust</span></a>
                  </h2>
                  <time
                    class="relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5"
                    datetime="2022-07-14"><span class="absolute inset-y-0 left-0 flex items-center"
                      aria-hidden="true"><span
                        class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"></span></span>July 14, 2022</time>
                  <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                    When we released the first version of cosmOS last year, it was
                    written in Go. Go is a wonderful programming language, but
                    it’s been a while since I’ve seen an article on the front page
                    of Hacker News about rewriting some important tool in Go and I
                    see articles on there about rewriting things in Rust every
                    single week.
                  </p>
                  <div aria-hidden="true" class="relative z-10 mt-4 flex items-center text-sm font-medium text-teal-500">
                    Read article<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"
                      class="ml-1 h-4 w-4 stroke-current">
                      <path d="M6.75 5.75 9.25 8l-2.5 2.25" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </article>
              </div>
              <div class="space-y-10 lg:pl-16 xl:pl-24">
                <form action="/thank-you" class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
                  <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                      aria-hidden="true" class="h-6 w-6 flex-none">
                      <path d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
                        class="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"></path>
                      <path d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
                        class="stroke-zinc-400 dark:stroke-zinc-500"></path>
                    </svg><span class="ml-3">Stay up to date</span>
                  </h2>
                  <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                    Get notified when I publish something new, and unsubscribe at
                    any time.
                  </p>
                  <div class="mt-6 flex">
                    <input placeholder="Email address" aria-label="Email address" required=""
                      class="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 sm:text-sm dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10"
                      type="email" /><button
                      class="inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70 ml-4 flex-none"
                      type="submit">
                      Join
                    </button>
                  </div>
                </form>
                <div class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
                  <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                      aria-hidden="true" class="h-6 w-6 flex-none">
                      <path d="M2.75 9.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
                        class="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"></path>
                      <path
                        d="M3 14.25h6.249c.484 0 .952-.002 1.316.319l.777.682a.996.996 0 0 0 1.316 0l.777-.682c.364-.32.832-.319 1.316-.319H21M8.75 6.5V4.75a2 2 0 0 1 2-2h2.5a2 2 0 0 1 2 2V6.5"
                        class="stroke-zinc-400 dark:stroke-zinc-500"></path>
                    </svg><span class="ml-3">Work</span>
                  </h2>
                  <ol class="mt-6 space-y-4">
                    <li class="flex gap-4">
                      <div
                        class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
                        <img alt="" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="h-7 w-7"
                          src="https://spotlight.tailwindui.com/_next/static/media/planetaria.ecd81ade.svg"
                          style="color: transparent" />
                      </div>
                      <dl class="flex flex-auto flex-wrap gap-x-2">
                        <dt class="sr-only">Company</dt>
                        <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
                          Planetaria
                        </dd>
                        <dt class="sr-only">Role</dt>
                        <dd class="text-xs text-zinc-500 dark:text-zinc-400">
                          CEO
                        </dd>
                        <dt class="sr-only">Date</dt>
                        <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2019 until Present">
                          <time datetime="2019">2019</time>
                          <span aria-hidden="true">—</span>
                          <time datetime="2024">Present</time>
                        </dd>
                      </dl>
                    </li>
                    <li class="flex gap-4">
                      <div
                        class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
                        <img alt="" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="h-7 w-7"
                          src="https://spotlight.tailwindui.com/_next/static/media/planetaria.ecd81ade.svg"
                          style="color: transparent" />
                      </div>
                      <dl class="flex flex-auto flex-wrap gap-x-2">
                        <dt class="sr-only">Company</dt>
                        <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
                          Airbnb
                        </dd>
                        <dt class="sr-only">Role</dt>
                        <dd class="text-xs text-zinc-500 dark:text-zinc-400">
                          Product Designer
                        </dd>
                        <dt class="sr-only">Date</dt>
                        <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2014 until 2019">
                          <time datetime="2014">2014</time>
                          <span aria-hidden="true">—</span>
                          <time datetime="2019">2019</time>
                        </dd>
                      </dl>
                    </li>
                    <li class="flex gap-4">
                      <div
                        class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
                        <img alt="" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="h-7 w-7"
                          src="https://spotlight.tailwindui.com/_next/static/media/planetaria.ecd81ade.svg"
                          style="color: transparent" />
                      </div>
                      <dl class="flex flex-auto flex-wrap gap-x-2">
                        <dt class="sr-only">Company</dt>
                        <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
                          Facebook
                        </dd>
                        <dt class="sr-only">Role</dt>
                        <dd class="text-xs text-zinc-500 dark:text-zinc-400">
                          iOS Software Engineer
                        </dd>
                        <dt class="sr-only">Date</dt>
                        <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2011 until 2014">
                          <time datetime="2011">2011</time>
                          <span aria-hidden="true">—</span>
                          <time datetime="2014">2014</time>
                        </dd>
                      </dl>
                    </li>
                    <li class="flex gap-4">
                      <div
                        class="relative mt-1 flex h-10 w-10 flex-none items-center justify-center rounded-full shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
                        <img alt="" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="h-7 w-7"
                          src="https://spotlight.tailwindui.com/_next/static/media/planetaria.ecd81ade.svg"
                          style="color: transparent" />
                      </div>
                      <dl class="flex flex-auto flex-wrap gap-x-2">
                        <dt class="sr-only">Company</dt>
                        <dd class="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100">
                          Starbucks
                        </dd>
                        <dt class="sr-only">Role</dt>
                        <dd class="text-xs text-zinc-500 dark:text-zinc-400">
                          Shift Supervisor
                        </dd>
                        <dt class="sr-only">Date</dt>
                        <dd class="ml-auto text-xs text-zinc-400 dark:text-zinc-500" aria-label="2008 until 2011">
                          <time datetime="2008">2008</time>
                          <span aria-hidden="true">—</span>
                          <time datetime="2011">2011</time>
                        </dd>
                      </dl>
                    </li>
                  </ol>
                  <a class="inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70 group mt-6 w-full"
                    href="#">Download CV<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"
                      class="h-4 w-4 stroke-zinc-400 transition group-active:stroke-zinc-600 dark:group-hover:stroke-zinc-50 dark:group-active:stroke-zinc-50">
                      <path d="M4.75 8.75 8 12.25m0 0 3.25-3.5M8 12.25v-8.5" stroke-width="1.5" stroke-linecap="round"
                        stroke-linejoin="round"></path>
                    </svg></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="pricing" class="relative overflow-hidden bg-slate-50 pb-20 pt-24 lg:pb-24 xl:pb-32"><img
        src="https://tailwindui.com/img/beams-pricing.png" alt="" class="absolute left-1/2 top-0 -ml-[40rem] w-[90.4375rem] max-w-none">
      <div
        class="absolute  inset-x-0 bottom-0 h-96 text-slate-600/10 [mask-image:linear-gradient(to_bottom,transparent,white)]">
        <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="pricing-pattern" width="32" height="32" patternUnits="userSpaceOnUse" x="50%" y="100%"
              patternTransform="translate(0 -1)">
              <path d="M0 32V.5H32" fill="none" stroke="currentColor"></path>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#pricing-pattern)"></rect>
        </svg></div>
      <div class="relative sdasda mx-auto max-w-container px-4 sm:px-6 lg:px-8">
        <section class="mx-auto max-w-[40rem] lg:max-w-none">
          <div class="max-w-3xl1 pr-12">
            <h2 class="text-base font-semibold leading-7 text-sky-500">Pricing</h2>
            <p class="mt-4 text-5xl font-extrabold tracking-tight text-slate-900">Get just one or get ’em all.</p>
            <p class="mt-4 max-w-xl text-base leading-8 text-slate-700">Every template includes free updates, and can be
              used on unlimited projects — both personal and commercial.</p>
            <div class="flex flex-wrap gap-6 mt-9">
              <div class="flex items-center text-sm font-medium text-slate-500"><svg
                  class="h-8 w-8 flex-none stroke-current text-slate-400" fill="none" stroke-width="1.5"
                  stroke-linecap="round" stroke-linejoin="round">
                  <ellipse cx="16" cy="16" rx="13" ry="5"></ellipse>
                  <ellipse cx="16" cy="16" rx="13" ry="5" transform="rotate(60 16 16)"></ellipse>
                <ellipse rx="13" ry="5" transform="matrix(-.5 .86603 .86603 .5 16 16)"></ellipse>
                <circle cx="16" cy="16" r="2"></circle>
              </svg><span class="ml-2.5">React</span></div>
            <div class="flex items-center text-sm font-medium text-slate-500"><svg
                class="h-8 w-8 flex-none stroke-current text-slate-400" fill="none" stroke-width="1.5"
                stroke-linecap="round" stroke-linejoin="round">
                <defs>
                  <linearGradient id="next-icon-gradient-a" x1="15.125" y1="18.25" x2="24.25" y2="27.375"
                    gradientUnits="userSpaceOnUse">
                    <stop offset=".24" stop-color="currentColor"></stop>
                    <stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
                  </linearGradient>
                  <linearGradient id="next-icon-gradient-b" x1="20.5" y1="11.25" x2="20.5" y2="18.25"
                    gradientUnits="userSpaceOnUse">
                    <stop stop-color="currentColor"></stop>
                    <stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
                  </linearGradient>
                </defs>
                <path
                  d="M16.25 28.5c6.765 0 12.25-5.485 12.25-12.25S23.015 4 16.25 4 4 9.485 4 16.25 9.485 28.5 16.25 28.5Z">
                </path>
                <path d="M12 21.5V12l12.25 14.25" stroke="url(#next-icon-gradient-a)"></path>
                <path d="M21.25 12a.75.75 0 1 0-1.5 0v8.17l1.5 1.64V12Z" fill="url(#next-icon-gradient-b)"
                  stroke-width="0"></path>
              </svg><span class="ml-2.5">Next.js</span></div>
          </div>
        </div>
        <div class="mt-16 lg:mt-0 lg:flex lg:flex-row-reverse lg:items-center">
          <div
            class="relative z-10 -mx-4 shadow-lg ring-1 ring-slate-900/10 sm:mx-0 sm:rounded-3xl lg:w-1/2 lg:flex-none">
            <div class="flex absolute -bottom-px left-1/2 -ml-48 h-[2px] w-96">
              <div
                class="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]">
              </div>
              <div
                class="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]">
              </div>
              <div
                class="-ml-[100%] w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]">
              </div>
              <div
                class="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]">
              </div>
            </div>
            <div class="relative bg-white px-4 py-10 sm:rounded-3xl sm:px-10">
              <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-sky-500">Get with all-access</h3><a
                  class="inline-flex justify-center rounded-lg text-sm font-semibold py-2 px-3 bg-slate-900 text-white hover:bg-slate-700"
                  href="/all-access"><span>Get all-access <span aria-hidden="true">→</span></span></a>
              </div>
              <div class="mt-3 flex items-center">
                <p class="text-[2.5rem] leading-none text-slate-900">$<span class="font-bold">299</span></p>
                <p class="ml-3 text-sm"><span class="font-semibold text-slate-900">one-time payment</span><br><span
                    class="text-slate-500">plus local taxes</span></p>
              </div>
              <p class="mt-6 text-sm leading-6 text-slate-600">Get lifetime access to every one of our website templates
                as well as all of our component examples for a single one-time purchase.</p>
              <h4 class="sr-only">All-access features</h4>
              <ul class="mt-10 space-y-8 border-t border-slate-900/10 pt-10 text-sm leading-6 text-slate-700">
                <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"
                    class="h-8 w-8 flex-none">
                    <path fill="#fff" d="M0 0h32v32H0z"></path>
                    <rect width="23" height="22" x="3" y="5" stroke="#0EA5E9" stroke-linejoin="round" stroke-width="1.5"
                      rx="2"></rect>
                    <rect width="10" height="18" x="19" y="9" fill="#E0F2FE" stroke="#0EA5E9" stroke-linejoin="round"
                      stroke-width="1.5" rx="2"></rect>
                    <circle cx="6" cy="8" r="1" fill="#0EA5E9"></circle>
                    <circle cx="9" cy="8" r="1" fill="#0EA5E9"></circle>
                    <path stroke="#0EA5E9" stroke-width="1.5" d="M3 11h16"></path>
                  </svg>
                  <p class="ml-5"><strong class="font-semibold text-slate-900">Every site template</strong> <!-- -->—
                    beautifully designed, expertly crafted website templates built with modern technologies like React
                    and Next.js.</p>
                </li>
                <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"
                    class="h-8 w-8 flex-none">
                    <path fill="#fff" d="M0 0h32v32H0z"></path>
                    <path fill="#E0F2FE"
                      d="M23 22l7-4v7l-7 4v-7zM9 22l7-4v7l-7 4v-7zM16 11l7-4v7l-7 4v-7zM2 18l7 4v7l-7-4v-7zM9 7l7 4v7l-7-4V7zM16 18l7 4v7l-7-4v-7z">
                    </path>
                    <path fill="#0EA5E9"
                      d="M16 3l.372-.651a.75.75 0 00-.744 0L16 3zm7 4h.75a.75.75 0 00-.378-.651L23 7zM9 7l-.372-.651A.75.75 0 008.25 7H9zM2 18l-.372-.651A.75.75 0 001.25 18H2zm28 0h.75a.75.75 0 00-.378-.651L30 18zm0 7l.372.651A.75.75 0 0030.75 25H30zm-7 4l-.372.651a.75.75 0 00.744 0L23 29zM9 29l-.372.651a.75.75 0 00.744 0L9 29zm-7-4h-.75c0 .27.144.518.378.651L2 25zM15.628 3.651l7 4 .744-1.302-7-4-.744 1.302zm7 2.698l-7 4 .744 1.302 7-4-.744-1.302zm-6.256 4l-7-4-.744 1.302 7 4 .744-1.302zm-7-2.698l7-4-.744-1.302-7 4 .744 1.302zm-.744 7l7 4 .744-1.302-7-4-.744 1.302zm7 2.698l-7 4 .744 1.302 7-4-.744-1.302zm-6.256 4l-7-4-.744 1.302 7 4 .744-1.302zm-7-2.698l7-4-.744-1.302-7 4 .744 1.302zm20.256-4l7 4 .744-1.302-7-4-.744 1.302zm7 2.698l-7 4 .744 1.302 7-4-.744-1.302zm-6.256 4l-7-4-.744 1.302 7 4 .744-1.302zm-7-2.698l7-4-.744-1.302-7 4 .744 1.302zm13.256 5.698l-7 4 .744 1.302 7-4-.744-1.302zm-6.256 4l-7-4-.744 1.302 7 4 .744-1.302zM30.75 25v-7h-1.5v7h1.5zm-15.122-.651l-7 4 .744 1.302 7-4-.744-1.302zm-6.256 4l-7-4-.744 1.302 7 4 .744-1.302zM2.75 25v-7h-1.5v7h1.5zm14 0v-7h-1.5v7h1.5zM8.25 7v7h1.5V7h-1.5zm14 0v7h1.5V7h-1.5zm-7 4v7h1.5v-7h-1.5zm-7 11v7h1.5v-7h-1.5zm14 0v7h1.5v-7h-1.5z">
                    </path>
                  </svg>
                  <p class="ml-5"><strong class="font-semibold text-slate-900">Over 500+ components</strong> <!-- -->—
                    everything you need to build beautiful application UIs, marketing sites, ecommerce stores, and more.
                  </p>
                </li>
                <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"
                    class="h-8 w-8 flex-none">
                    <path fill="#fff" d="M0 0h32v32H0z"></path>
                    <path fill="#E0F2FE"
                      d="M13.168 18.828a4 4 0 110-5.656L15.997 16l1.5-1.5 1.328-1.328a4 4 0 110 5.656L15.996 16l-1.499 1.5-1.329 1.328z">
                    </path>
                    <path stroke="#0EA5E9" stroke-linecap="round" stroke-width="1.5"
                      d="M14.497 17.5l-1.329 1.328a4 4 0 110-5.656l5.657 5.656a4 4 0 100-5.656L17.496 14.5"></path>
                    <circle cx="16" cy="16" r="14" stroke="#0EA5E9" stroke-width="1.5"></circle>
                  </svg>
                  <p class="ml-5"><strong class="font-semibold text-slate-900">Lifetime access</strong> — get instant
                    access to everything we have today, plus any new components and templates we add in the future.</p>
                </li>
              </ul>
              <div class="relative mt-10 flex rounded-xl border border-slate-600/10 bg-slate-50 p-6"><svg fill="none"
                  xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-none" stroke="#94A3B8" stroke-width="1.5">
                  <circle cx="11" cy="16" r="3.25" fill="#94A3B8" fill-opacity=".2"></circle>
                  <circle cx="21" cy="13" r="3.25" fill="#94A3B8" fill-opacity=".2"></circle>
                  <path
                    d="M28.909 19c.223-.964.341-1.968.341-3 0-7.318-5.932-13.25-13.25-13.25S2.75 8.682 2.75 16c0 1.032.118 2.036.341 3"
                    stroke-linecap="round"></path>
                  <path
                    d="m18.031 29.016-2.187.109s-1.475-.118-1.827-.29c-1.049-.51-.579-2.915 0-3.95 1.157-2.064 3.752-5.135 7.125-5.135h.024c2.5 0 4.404 1.687 5.692 3.401-1.963 2.975-5.161 5.276-8.827 5.865Z"
                    fill="#94A3B8" fill-opacity=".2" stroke-linejoin="round"></path>
                  <path
                    d="m14.001 24.913.016-.027c.26-.465.593-.98.991-1.5-1.042-.918-2.374-1.636-3.988-1.636H11c-2.094 0-3.847 1.208-5.055 2.492a12.987 12.987 0 0 0 7.987 4.595l.057-.016c-1.004-.534-.555-2.868.012-3.908Z"
                    fill="#94A3B8" fill-opacity=".2" stroke-linejoin="round"></path>
                </svg>
                <p class="ml-5 text-sm leading-6 text-slate-700"><strong class="font-semibold text-slate-900">Available
                    for teams</strong> — get access to all of our templates and components plus any future updates for
                  your entire team.</p>
              </div>
            </div>
          </div>
          <div class="relative mt-10 lg:mt-0 lg:w-1/2 lg:flex-none">
            <div
              class="absolute -inset-y-8 -left-2 w-px bg-slate-900/10 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)] sm:left-0">
            </div>
            <div
              class="absolute -inset-y-8 -right-2 w-px bg-slate-900/10 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)] sm:right-0 lg:hidden">
            </div>
            <div
              class="absolute -inset-x-8 top-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]">
            </div>
            <div
              class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]">
            </div>
            <div class="px-2 py-8 sm:px-8">
              <div class="mx-auto max-w-[28.75rem]">
                <div class="flex items-center justify-between">
                  <h3 class="text-base font-semibold text-slate-500"><span class="text-slate-900">Spotlight</span><span
                      class="hidden sm:inline"> — </span><span class="block text-sm sm:inline sm:text-base">Personal
                      website template</span></h3><a
                    class="inline-flex justify-center rounded-lg text-sm font-semibold py-2 px-3 text-slate-900 ring-1 ring-slate-900/10 hover:ring-slate-900/20"
                    href="https://tailwindui.com/checkout/88b34469-c305-42da-8615-12b24e1cebfa"><span>Get
                      template<!-- --> <span aria-hidden="true" class="text-black/25">→</span></span></a>
                </div>
                <p class="mt-2 flex items-center"><span class="text-2xl text-slate-900">$<span
                      class="font-bold">99</span></span><span class="ml-2 text-sm text-slate-500">plus local
                    taxes</span></p>
                <p class="mt-2 text-sm leading-6 text-slate-700">A personal website so nice you’ll actually be inspired
                  to publish on it.</p>
              </div>
            </div>
            <div class="relative px-2 py-10 sm:px-8">
              <div
                class="absolute -inset-x-8 top-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]">
              </div>
              <ul role="list" class="mx-auto max-w-[28.75rem] space-y-8 text-sm leading-6 text-slate-700">
                <li class="flex"><svg class="h-6 w-6 flex-none fill-slate-400" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M7.672 12.122a1 1 0 0 0-1.344 1.481l1.344-1.48Zm9.98-3.22a1 1 0 0 0-1.304-1.517L17.652 8.9Zm-6.882 7.383-.673.74a1 1 0 0 0 1.579-.317l-.906-.423Zm.906.423c1.382-2.961 3.428-5.616 5.976-7.807l-1.304-1.516c-2.752 2.366-4.976 5.245-6.485 8.477l1.813.846Zm-5.348-3.105 3.77 3.423 1.344-1.481-3.77-3.423-1.344 1.481Z">
                    </path>
                  </svg>
                  <p class="ml-3"><strong class="font-semibold text-slate-900">Unlimited projects</strong> —<!-- -->
                    <!-- -->buy once and use this template for as many projects as you need, both personal and
                    commercial.</p>
                </li>
                <li class="flex"><svg class="h-6 w-6 flex-none fill-slate-400" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M7.672 12.122a1 1 0 0 0-1.344 1.481l1.344-1.48Zm9.98-3.22a1 1 0 0 0-1.304-1.517L17.652 8.9Zm-6.882 7.383-.673.74a1 1 0 0 0 1.579-.317l-.906-.423Zm.906.423c1.382-2.961 3.428-5.616 5.976-7.807l-1.304-1.516c-2.752 2.366-4.976 5.245-6.485 8.477l1.813.846Zm-5.348-3.105 3.77 3.423 1.344-1.481-3.77-3.423-1.344 1.481Z">
                    </path>
                  </svg>
                  <p class="ml-3"><strong class="font-semibold text-slate-900">Free updates</strong> —<!-- -->
                    <!-- -->any updates we make to the template are included with your original purchase.</p>
                </li>
                <li class="flex"><svg class="h-6 w-6 flex-none fill-slate-400" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M7.672 12.122a1 1 0 0 0-1.344 1.481l1.344-1.48Zm9.98-3.22a1 1 0 0 0-1.304-1.517L17.652 8.9Zm-6.882 7.383-.673.74a1 1 0 0 0 1.579-.317l-.906-.423Zm.906.423c1.382-2.961 3.428-5.616 5.976-7.807l-1.304-1.516c-2.752 2.366-4.976 5.245-6.485 8.477l1.813.846Zm-5.348-3.105 3.77 3.423 1.344-1.481-3.77-3.423-1.344 1.481Z">
                    </path>
                  </svg>
                  <p class="ml-3"><strong class="font-semibold text-slate-900">Simple .zip file</strong> —<!-- -->
                    <!-- -->templates are delivered as a simple archive you can unzip and start playing with right away.
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <section class="mt-20 lg:mt-24">
        <h2 class="sr-only">Testimonials</h2>
        <div class="mx-auto max-w-[40rem] lg:max-w-[50rem]">
          <div class="flex justify-center space-x-4 pt-2" role="tablist" aria-orientation="horizontal"><button
              class="h-12 w-12 overflow-hidden rounded-full bg-slate-100 shadow-md ring-2 ring-white transition [&amp;:focus:not(:focus-visible)]:outline-none opacity-40"
              id="headlessui-tabs-tab-1" role="tab" type="button" aria-selected="false" tabindex="-1"
              data-headlessui-state="" aria-controls="headlessui-tabs-panel-4"><img src="https://tailwindui.com/img/benbarbersmith-profile.jpeg"
                alt=""><span class="sr-only">Alex MacCaw</span></button><button
              class="h-12 w-12 overflow-hidden rounded-full bg-slate-100 shadow-md ring-2 ring-white transition [&amp;:focus:not(:focus-visible)]:outline-none -translate-y-2"
              id="headlessui-tabs-tab-2" role="tab" type="button" aria-selected="true" tabindex="0"
              data-headlessui-state="selected" aria-controls="headlessui-tabs-panel-5"><img
                src="https://tailwindui.com/img/benbarbersmith-profile.jpeg" alt=""><span class="sr-only">Ben
                Barbersmith</span></button><button
              class="h-12 w-12 overflow-hidden rounded-full bg-slate-100 shadow-md ring-2 ring-white transition [&amp;:focus:not(:focus-visible)]:outline-none opacity-40"
              id="headlessui-tabs-tab-3" role="tab" type="button" aria-selected="false" tabindex="-1"
              data-headlessui-state="" aria-controls="headlessui-tabs-panel-6"><img src="https://tailwindui.com/img/benbarbersmith-profile.jpeg"
                alt=""><span class="sr-only">Justin Jackson</span></button></div>
          <div class="mt-10"><span id="headlessui-tabs-panel-4" role="tabpanel" tabindex="-1"
              style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"
              aria-labelledby="headlessui-tabs-tab-1"></span>
            <figure class="text-center" id="headlessui-tabs-panel-5" role="tabpanel" tabindex="0"
              data-headlessui-state="selected" aria-labelledby="headlessui-tabs-tab-2">
              <blockquote class="text-2xl leading-9 text-slate-900">
                <p class="before:content-['“'] after:content-['”']">Yet again Tailwind and Tailwind UI are dramatically
                  speeding up my frontend work. At this point Tailwind UI is hands-down the highest ROI digital asset
                  I’ve ever bought.</p>
              </blockquote>
              <figcaption class="mt-8"><span class="block text-base font-medium leading-7 text-slate-900">Ben
                  Barbersmith</span><span class="text-sm text-slate-600"><a
                    href="https://twitter.com/benbarbersmith/status/1527291090889371651">@benbarbersmith</a></span>
              </figcaption>
            </figure><span id="headlessui-tabs-panel-6" role="tabpanel" tabindex="-1"
              style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"
              aria-labelledby="headlessui-tabs-tab-3"></span>
          </div>
        </div>
      </section>
    </div>
  </div>




</div></template>

<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>

<style scoped lang="scss">.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.ss {
  pointer-events: none;
  /* 让上层盒子不接收鼠标事件 */
}

#pricing{
 .sdasda{
  max-width: 1200px;
 }
}
</style>